import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col } from 'antd';
import { SelectC, FirstHeaderC, SecondHeaderC, PrimaryC } from '../../comps';

class SelectCDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      ds1: undefined,
      init1: undefined,
      init2: undefined,
      ds2: undefined,
      ds3: undefined,
      ds4: undefined,
    };

    setTimeout(() => {
      let ds = [];
      for (let i = 0; i < 20; i++) {
        ds.push({ title: 'item' + i, value: i.toString() });
      }
      this.setState({
        ds1: ds,
        ds3: ds,
        init1: '2',
        init2: ['1', '2', '3'],
      });
    }, 5000);
  }

  change = () => {
    this.state.SelectC.setSelect('2');
  };

  change1 = () => {
    let ds = [];
    for (let i = 100; i < 120; i++) {
      ds.push({ title: '异步' + i, value: i.toString() });
    }
    this.setState(
      {
        ds3: ds,
      },
      () => {
        this.state.SelectC1.setSelect(['111', '113']);
      },
    );
  };

  onSearch = (e) => {
    setTimeout(() => {
      let ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds2: ds,
      });
    }, 500);
  };

  onSearch1 = (e) => {
    setTimeout(() => {
      let ds = [];
      for (let i = 0; i < 10; i++) {
        ds.push({ title: e + i, value: i.toString() });
      }
      this.setState({
        ds4: ds,
      });
    }, 500);
  };

  render() {
    const ds1 = [
      { title: '苹果', value: '1' },
      { title: '香蕉', value: '2', disabled: true },
      { title: '西瓜', value: '3' },
      { title: '橙子', value: '4' },
    ];
    const ds2 = [
      {
        label: '水果',
        list: [
          { title: '苹果', value: '1' },
          { title: '香蕉', value: '2', disabled: true },
          { title: '西瓜', value: '3' },
          { title: '橙子', value: '4' },
        ],
      },
      {
        label: '学习工具',
        list: [
          { title: '铅笔', value: '11' },
          { title: '直尺', value: '22', disabled: true },
          { title: '作业本', value: '33' },
          { title: '圆规', value: '44' },
        ],
      },
    ];

    return (
      <Row style={{ padding: '20px' }}>
        <FirstHeaderC title='下拉选择组件-单选' />
        <Col span={6}>
          <SecondHeaderC title='基本场景' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select1' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='有初始化值' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select2' // Form识别的Item ID
            dataSource={ds1}
            initialValue={'3'}
            onChange={(e) => console.log(e)}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='异步加载' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select3' // Form识别的Item ID
            // dataSource={this.state.ds1}
            dataSource={ds1}
            initialValue={this.state.init1}
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ SelectC: ref })}
          />
          <PrimaryC title='点击更改' onClick={this.change} />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='模拟搜索，从后端获取数据' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select4' // Form识别的Item ID
            dataSource={this.state.ds2}
            onChange={(e) => console.log(e)}
            showSearch={true}
            onSearch={this.onSearch}
            filterOption={false}
            allowClear={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='前端自搜索' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select5' // Form识别的Item ID
            dataSource={this.state.ds1}
            onChange={(e) => console.log(e)}
            showSearch={true}
            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
          />
        </Col>
        <FirstHeaderC title='下拉选择组件-多选' />
        <Col span={6}>
          <SecondHeaderC title='基本场景' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select21' // Form识别的Item ID
            dataSource={ds1}
            onChange={(e) => console.log(e)}
            isMultiple={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='有初始化值' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select22' // Form识别的Item ID
            dataSource={ds1}
            initialValue={['1', '3']}
            onChange={(e) => console.log(e)}
            isMultiple={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='异步加载' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select23' // Form识别的Item ID
            dataSource={this.state.ds3}
            initialValue={this.state.init2}
            onChange={(e) => console.log(e)}
            onRef={(ref) => this.setState({ SelectC1: ref })}
            isMultiple={true}
          />
          <PrimaryC title='点击更改' onClick={this.change1} />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='模拟搜索，从后端获取数据' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select24' // Form识别的Item ID
            dataSource={this.state.ds4}
            onChange={(e) => console.log(e)}
            onSearch={this.onSearch1}
            filterOption={false}
            isMultiple={true}
            allowClear={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='前端自搜索' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select25' // Form识别的Item ID
            dataSource={this.state.ds1}
            onChange={(e) => console.log(e)}
            filterOption={(input, option) => {
              console.log(option.props.children);

              return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0;
            }}
            isMultiple={true}
            allowClear={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='分组显示多选' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select26' // Form识别的Item ID
            dataSource={ds2}
            onChange={(e) => console.log(e)}
            filterOption={(input, option) => {
              return option.props.children.indexOf(input.toLowerCase()) >= 0;
            }}
            isGroup={true}
            isMultiple={true}
            allowClear={true}
          />
        </Col>
        <Col span={6}>
          <SecondHeaderC title='分组显示单选' />
          <SelectC
            form={this.props.form} // form对象
            title='下拉选择' // 显示名称
            dataIndex='select27' // Form识别的Item ID
            dataSource={ds2}
            onChange={(e) => console.log(e)}
            filterOption={(input, option) => {
              return option.props.children.indexOf(input.toLowerCase()) >= 0;
            }}
            isGroup={true}
            isMultiple={false}
            allowClear={true}
          />
        </Col>
      </Row>
    );
  }
}

export default Form.create()(SelectCDemo);
